/* 添加到您现有的CSS中，防止横向滚动条 */

/* 确保所有元素不会导致横向滚动 */
* {
  box-sizing: border-box;
  max-width: 100%;
}


/* 修复常见的横向滚动问题 */
html,
body {
  width: 100%;
  /* overflow-x: hidden; */
  /* 防止横向滚动 */
  margin: 0;
  padding: 0;
  /* height: 100%; */
}

/* 确保图片和其他媒体不会超出容器 */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* 确保所有容器都正确约束其内容 */
#app,
.card,
main,
section,
div {
  max-width: 100%;
  word-wrap: break-word;
  /* 确保长文本换行 */
}

/* 对于需要滚动的特定容器，可以单独设置 */
.scrollable-container {
  overflow-x: auto;
  max-width: 100%;
}

/* 修复移动端视口问题 */
@media screen and (max-width: 768px) {

  /* 针对小屏幕的额外修复 */
  body {
    padding: 0;
  }

  /* 调整移动设备上可能过宽的元素 */
  table {
    display: block;
    overflow-x: auto;
  }
}

/* 适用于WebKit内核浏览器 */
::-webkit-scrollbar {
  width: 0;
  display: none;
}

  